import 'package:city_pickers/city_pickers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class RecruitJoinController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;
  final double navTop = 44.0;

  RxInt tabIdx = RxInt(0);

  RxBool isChecked = RxBool(false);
}

class RecruitJoinPage extends GetView<RecruitJoinController> {
  const RecruitJoinPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeTop: true,
      removeLeft: true,
      removeRight: true,
      removeBottom: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: HexColor(ColorsUtils.colorF7f7),
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text(
                      '我要加入',
                      softWrap: true,
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        fontWeight: FontWeight.w700,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.only(top: 10),
                color: Colors.white,
                padding:
                    const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                child: ListBody(
                  children: [
                    SizedBox(
                      height: 65,
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '手机号码',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Center(
                              child: TextField(
                                cursorHeight: 20,
                                cursorWidth: 3,
                                cursorRadius: const Radius.circular(2),
                                cursorColor: HexColor(ColorsUtils.colorFf64),
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000,
                                ),
                                textAlign: TextAlign.left,
                                textAlignVertical: TextAlignVertical.center,
                                textDirection: TextDirection.ltr,
                                keyboardType: TextInputType.phone,
                                decoration: InputDecoration(
                                  hintText: '请输入收货人手机号码',
                                  hintStyle: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: ColorsUtils.color9999,
                                  ),
                                  filled: true,
                                  fillColor: HexColor(ColorsUtils.colorF7f7),
                                  isDense: true,
                                  isCollapsed: true,
                                  prefixIconConstraints:
                                      const BoxConstraints.expand(
                                          height: 50, width: 70),
                                  prefixIcon: Container(
                                    alignment: Alignment.center,
                                    child: Text.rich(
                                      TextSpan(
                                        children: [
                                          TextSpan(
                                            text: '+86 ',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.color0000,
                                            ),
                                          ),
                                          WidgetSpan(
                                              child: Icon(
                                                CupertinoIcons.chevron_down,
                                                color: HexColor(
                                                    ColorsUtils.color9999),
                                                size: 14,
                                              ),
                                              alignment:
                                                  PlaceholderAlignment.middle),
                                        ],
                                      ),
                                    ),
                                  ).onTap(() {}),
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 15, horizontal: 20),
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  constraints: const BoxConstraints.expand(
                                      width: 270, height: 50),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 65,
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '验证码',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            alignment: Alignment.centerLeft,
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: HexColor(ColorsUtils.colorFf64),
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              textDirection: TextDirection.ltr,
                              decoration: InputDecoration(
                                hintText: '23689',
                                hintStyle: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color9999,
                                ),
                                filled: true,
                                fillColor: HexColor(ColorsUtils.colorF7f7),
                                isDense: true,
                                isCollapsed: true,
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 20),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 135, height: 50),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: TextButton(
                                onPressed: () {},
                                style: ButtonStyle(
                                  minimumSize: const WidgetStatePropertyAll(
                                    Size(120, 30),
                                  ),
                                  fixedSize: const WidgetStatePropertyAll(
                                    Size(120, 30),
                                  ),
                                  overlayColor: const WidgetStatePropertyAll(
                                      Colors.transparent),
                                  backgroundColor: const WidgetStatePropertyAll(
                                      Colors.transparent),
                                  alignment: Alignment.center,
                                  shape: WidgetStatePropertyAll(
                                    RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(15),
                                      side: BorderSide(
                                        color: HexColor(ColorsUtils.colorFf64),
                                      ),
                                    ),
                                  ),
                                ),
                                child: Text(
                                  '获取验证码',
                                  style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorFf64,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 65,
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '报名人',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Center(
                              child: TextField(
                                cursorHeight: 20,
                                cursorWidth: 3,
                                cursorRadius: const Radius.circular(2),
                                cursorColor: HexColor(ColorsUtils.colorFf64),
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000,
                                ),
                                textAlign: TextAlign.left,
                                textAlignVertical: TextAlignVertical.center,
                                textDirection: TextDirection.ltr,
                                decoration: InputDecoration(
                                  hintText: '请输入报名人姓名',
                                  hintStyle: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: ColorsUtils.color9999,
                                  ),
                                  filled: true,
                                  fillColor: HexColor(ColorsUtils.colorF7f7),
                                  isDense: true,
                                  isCollapsed: true,
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 15, horizontal: 20),
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  constraints: const BoxConstraints.expand(
                                      width: 270, height: 50),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                color: Colors.white,
                padding:
                    const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      padding: const EdgeInsets.only(top: 20, bottom: 10),
                      child: Text(
                        '工作类型',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Center(
                            child: Obx(
                              () => Container(
                                width: 165,
                                height: 70,
                                decoration: activeBoxDecoration(0),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 15),
                                      child: Text(
                                        '全职专送',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            color: controller.tabIdx.value == 0
                                                ? ColorsUtils.colorFf64
                                                : ColorsUtils.color0000),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 5),
                                      child: Text(
                                        '海量订单，收入丰厚',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            color: controller.tabIdx.value == 0
                                                ? ColorsUtils.colorFf64
                                                : ColorsUtils.color9999),
                                      ),
                                    )
                                  ],
                                ),
                              ).onTap(() {
                                controller.tabIdx.value = 0;
                              }),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: Obx(
                              () => Container(
                                width: 165,
                                height: 70,
                                decoration: activeBoxDecoration(1),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 15),
                                      child: Text(
                                        '兼职众包',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            color: controller.tabIdx.value == 1
                                                ? ColorsUtils.colorFf64
                                                : ColorsUtils.color0000),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 5),
                                      child: Text(
                                        '自由接单，多劳多得',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            color: controller.tabIdx.value == 1
                                                ? ColorsUtils.colorFf64
                                                : ColorsUtils.color9999),
                                      ),
                                    )
                                  ],
                                ),
                              ).onTap(() {
                                controller.tabIdx.value = 1;
                              }),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 65,
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '工作城市',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Center(
                              child: TextField(
                                cursorHeight: 20,
                                cursorWidth: 3,
                                cursorRadius: const Radius.circular(2),
                                cursorColor: HexColor(ColorsUtils.colorFf64),
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000,
                                ),
                                readOnly: true,
                                textAlign: TextAlign.left,
                                textAlignVertical: TextAlignVertical.center,
                                textDirection: TextDirection.ltr,
                                decoration: InputDecoration(
                                  hintText: '广西 北海 海城区',
                                  hintStyle: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: ColorsUtils.color9999,
                                  ),
                                  filled: true,
                                  fillColor: HexColor(ColorsUtils.colorF7f7),
                                  isDense: true,
                                  isCollapsed: true,
                                  suffixIcon: Center(
                                    child: Icon(
                                      CupertinoIcons.chevron_forward,
                                      size: 15,
                                      color: HexColor(ColorsUtils.color9999),
                                    ),
                                  ),
                                  suffixIconConstraints:
                                      const BoxConstraints.expand(
                                          width: 40, height: 50),
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 15, horizontal: 20),
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  constraints: const BoxConstraints.expand(
                                      width: 270, height: 50),
                                ),
                                onTap: () async {
                                  //{"provinceName":"广西壮族自治区","provinceId":"450000","cityName":"南宁市","cityId":"450100","areaName":"兴宁区","areaId":"450102"}
                                  Result? result =
                                      await CityPickers.showCityPicker(
                                          context: context,
                                          height: 350,
                                          itemExtent: 40);
                                  if (result != null) {
                                    Get.log('result = $result');
                                  }
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 65,
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '工作地点',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Center(
                              child: TextField(
                                cursorHeight: 20,
                                cursorWidth: 3,
                                cursorRadius: const Radius.circular(2),
                                cursorColor: HexColor(ColorsUtils.colorFf64),
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000,
                                ),
                                readOnly: true,
                                textAlign: TextAlign.left,
                                textAlignVertical: TextAlignVertical.center,
                                textDirection: TextDirection.ltr,
                                decoration: InputDecoration(
                                  hintText: '北京路长青公园',
                                  hintStyle: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: ColorsUtils.color9999,
                                  ),
                                  filled: true,
                                  fillColor: HexColor(ColorsUtils.colorF7f7),
                                  isDense: true,
                                  isCollapsed: true,
                                  suffixIcon: Center(
                                    child: Icon(
                                      CupertinoIcons.chevron_forward,
                                      size: 15,
                                      color: HexColor(ColorsUtils.color9999),
                                    ),
                                  ),
                                  suffixIconConstraints:
                                      const BoxConstraints.expand(
                                          width: 40, height: 50),
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 15, horizontal: 20),
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                    borderSide: BorderSide.none,
                                  ),
                                  constraints: const BoxConstraints.expand(
                                      width: 270, height: 50),
                                ),
                                onTap: () {
                                  Get.toNamed(Routes.recruitPlace);
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                    top: 15, bottom: 25, left: (Get.width - 310) / 2),
                alignment: Alignment.centerLeft,
                child: Text.rich(
                  TextSpan(
                    children: [
                      WidgetSpan(
                          child: Obx(
                            () => controller.isChecked.isTrue
                                ? Icon(
                                    CupertinoIcons.checkmark_alt_circle_fill,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorFf64),
                                  )
                                : Icon(
                                    CupertinoIcons.circle,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorCccc),
                                  ),
                          ),
                          alignment: PlaceholderAlignment.middle),
                      TextSpan(
                        text: ' 我已阅读并同意',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999,
                          fontSize: StylesUtils.fontSize12,
                        ),
                      ),
                      TextSpan(
                        text: ' 小默配送报名说明',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize12,
                          color: ColorsUtils.colorFf64,
                        ),
                      ),
                    ],
                  ),
                ).onTap(() {
                  controller.isChecked.value = !controller.isChecked.value;
                }),
              ),
              Center(
                child: Container(
                  constraints:
                      const BoxConstraints.expand(width: 315, height: 45),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(23),
                    //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%)
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1)
                      ],
                      stops: const [
                        0,
                        0,
                        1,
                        1,
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(90),
                      ),
                    ),
                  ),
                  child: Text(
                    '立即提交',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize16,
                    ),
                  ),
                ).onTap(() {
                  Get.toNamed(Routes.recruitSuccess);
                }),
              )
            ],
          ),
        ),
      ),
    );
  }

  BoxDecoration activeBoxDecoration(int index) {
    if (controller.tabIdx.value == index) {
      return BoxDecoration(
          color: ColorsUtils.rgba(250, 245, 245, 1),
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: ColorsUtils.rgba(244, 195, 186, 1)));
    }
    return BoxDecoration(
      color: ColorsUtils.rgba(247, 247, 247, 1),
      borderRadius: BorderRadius.circular(5),
      border: Border.all(
        color: ColorsUtils.rgba(245, 245, 245, 1),
      ),
    );
  }
}
